<div id="top">
<div id="top1"></div>
<div id="top2"><!-- start #top2 //-->
<div id="top2l">
<img src="images/main-btn_01.gif" width="20" height="66" alt="">
<a href="index.php"><img src="images/main-btn_03.gif" width="239" height="66" alt=""></a>
</div>
<div id="top2r"><!-- start #top2r //-->
<form action="http://www.google.com/cse" target="_blank" id="cse-search-box" name="cse-search-box">
<input type="hidden" name="cx" value="012978166345690796306:vwe5n8ast18" />
<input type="hidden" name="ie" value="UTF-8" />
<div id="top2r-1">
<img src="images/main-btn_08.gif" width="8" height="22" alt="">
<p><input name="q" type="text" class="top2r-1-ser" value="enter keyword here" onfocus="this.value= '';"/></p>
<a href="#" onclick="document.forms['cse-search-box'].submit();return false;"><img src="images/main-btn_10.gif" width="26" height="22" alt=""></a>
</div >
</form>

<div id="top2r-2">
  <ul class="nav">
                <li class="space1"></li>
                <li class="space2"></li>
				<li class="feature2"><a href="feature.php">主題 Feature <div class="hoverFeature"></div></a></li>
                <li class="space3"></li>
				<li class="column"><a href="column.php">專欄 Column <div class="hoverColumn"></div></a></li>
                <li class="space3"></li>
				<li class="news"><a href="news.php">新聞 News <div class="hoverNews"></div></a></li>
                <li class="space3"></li>
				<li class="event"><a href="event.php">活動 Event<div class="hoverEvent"></div></a></li>
                <li class="space3"></li>
                <li class="rss"><a href="rss.php?type=rss" target="_blank">Rss訂閱<div class="hoverRss"></div></a></li>
			</ul>
            </div>

</div><!-- end #top2r //-->
</div><!-- end #top2 //-->
<script type="text/javascript">
var global_current_cursor_position_y = false;
	$(
		
		function(){
				$('.nav li').bind('mouseover',function(e){
						global_current_cursor_position_y = e.pageY;
						$('#top3 div').hide();
						var selectItemId = $(this).attr('className');
						switch(selectItemId)
						{
						case 'feature2':
							$($('#top3 div').get(0)).show();
							break;
						case 'column':
							$($('#top3 div').get(1)).show();
							break;
						case 'news':
							$($('#top3 div').get(2)).show();
							break;
						}
					});
				$('#top2r-2').bind('mouseout',function(e){				
						if((global_current_cursor_position_y - e.pageY) > 0)
						{
							$('#top3 div').hide();
						}
				});
				//select current item
				var url = window.location.href.split('?')[0]; 
				if(url.indexOf('feature') != -1)
				{
					$($('.nav li').get(2)).trigger('mouseover');
				}
				else if(url.indexOf('column') != -1)
				{
					$($('.nav li').get(4)).trigger('mouseover');
				}
				else if(url.indexOf('new') != -1)
				{
					$($('.nav li').get(6)).trigger('mouseover');
				}
				
		}
	);
	
</script>
<div id="top3">
    <div class="feature3" style="display: none">
    <ul>
      <li><a href="featurea.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/feature-btn_over_01.gif',1)"><img src="images/feature-btn_01.gif" alt="話題" name="Image5" width="66" height="27" border="0" id="Image5" /></a></li>
      <li><a href="featureb.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/feature-btn_over_02.gif',1)"><img src="images/feature-btn_02.gif" alt="徵文" name="Image6" width="71" height="27" border="0" id="Image6" /></a></li>   
      <li><a href="featurec.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/feature-btn_over_03.gif',1)"><img src="images/feature-btn_03.gif" alt="人物" name="Image7" width="70" height="27" border="0" id="Image7" /></a></li>
      <li><a href="featured.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/feature-btn_over_04.gif',1)"><img src="images/feature-btn_04.gif" alt="店家" name="Image8" width="61" height="27" border="0" id="Image8" /></a></li>
    </ul>
   </div>
  <div class="column3" style="display: none">
    <ul>
      <li><a href="column.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/column-btn_bver_01.gif',1)"><img src="images/column-btn_01.gif" alt="文章" name="Image9" width="72" height="27" border="0" id="Image9" /></a></li>
      <li><a href="columnb.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/column-btn_bver_02.gif',1)"><img src="images/column-btn_02.gif" alt="作者" name="Image10" width="97" height="27" border="0" id="Image10" /></a></li>   
    </ul>
  </div> 
   <div class="news3" style="display: none">
    <ul>
      <li><a href="newsa.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/news-btn_over_01.gif',1)"><img src="images/news-btn_01.gif" alt="飲食" name="Image11" width="68" height="27" border="0" id="Image11" /></a></li>
      <li><a href="newsb.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/news-btn_over_02.gif',1)"><img src="images/news-btn_02.gif" alt="設計" name="Image12" width="65" height="27" border="0" id="Image12" /></a></li>   
      <li><a href="newsc.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/news-btn_over_03.gif',1)"><img src="images/news-btn_03.gif" alt="時尚" name="Image13" width="71" height="27" border="0" id="Image13" /></a></li>
      <li><a href="newsd.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/news-btn_over_04.gif',1)"><img src="images/news-btn_04.gif" alt="科技" name="Image14" width="96" height="27" border="0" id="Image14" /></a></li>
      <li><a href="newse.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/news-btn_over_05.gif',1)"><img src="images/news-btn_05.gif" alt="旅遊" name="Image15" width="58" height="27" border="0" id="Image15" /></a></li>   
      <li><a href="newsf.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/news-btn_over_06.gif',1)"><img src="images/news-btn_06.gif" alt="藝文" name="Image16" width="51" height="27" border="0" id="Image16" /></a></li>
      <li><a href="newsg.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/news-btn_over_07.gif',1)"><img src="images/news-btn_07.gif" alt="休閒" name="Image17" width="78" height="27" border="0" id="Image17" /></a></li>
    </ul>
  </div>
  
</div>
</div>